<template>
    <div v-if="position==='left'" class="msgArea">
        <div class="left-talk">
            <van-loading v-if="showStopAnswerBtn" class="left-img" color="#5BDBE5"
                         style="background: #1F5155;" size="38" vertical>
                <template #icon>
                    <van-icon name="setting-o" size="38"/>
                </template>
            </van-loading>

            <img v-else class="left-img" :src='imgUrl'/>
            <div id="markdown" v-html="store.state.common.md.render(content)" @click.stop="copyText(content)"/>
            <van-icon name="description" class="copyBtn" @click.stop="copyText(content)"/>
        </div>
        <div style="margin-left: 54px; max-width: 65%; justify-content: center">
            <div v-if="showStopAnswerBtn" class="retryBtn"
                 @click.stop="$emit('stopAnswer')">停止回答
            </div>
            <div v-else-if="showRetryAnswerBtn" class="retryBtn" @click.stop="$emit('retryAnswer', chatMsg)">
                重新回答
            </div>
        </div>
    </div>
    <div v-else-if="position==='right'">
        <div class="right-talk">
            <img :src='imgUrl'/>
            <div id="markdown" v-html="store.state.common.md.render(content)" @click.stop="copyContent"/>
            <van-icon name="description" class="copyBtn" style="float:right;" @click.stop="copyContent"/>
        </div>
    </div>
</template>

<script setup>
// 父组件属性
import store from "@/store";
import Clipboard from 'vue-clipboard3';
import {showSuccessToast} from "vant";
import {computed} from "vue";
import {copyText} from "@/utils/common";

const props = defineProps({
    isLastMsg: {type: Boolean},
    chatMsg: null,
    replyPlaceHolder: {type: String, default: ""},
    imgUrl: {type: String, default: ""},
    content: {type: String, default: ""},
    position: {type: String, default: "left"},
})

// 是否显示停止回答按钮
const showStopAnswerBtn = computed(() => {
    return props.isLastMsg && store.state.common.hasSseClient && props.replyPlaceHolder !== props.content
})

// 是否显示重新回答按钮
const showRetryAnswerBtn = computed(() => {
    return props.isLastMsg && !store.state.common.hasSseClient && store.getters['user/canSendPrompt']
})

// 复制内容
const copyContent = () => {
    Clipboard().toClipboard(props.content);
    showSuccessToast("复制成功")
}
</script>


<style scoped lang="less">
.msgArea {
  display: inline-block;
  max-width: 100%;
}

.copyBtn {
  color: rgba(176, 223, 229, 1)
}

.retryBtn {
  display: inline-block; /* 将 div 元素设为内联块级元素 */
  width: auto; /* 让 div 元素宽度自适应其内部元素的宽度 */
  border: 1px solid black; /* 可选：添加边框以便查看 div 的大小 */
  padding: 1px 2px;
  border-radius: 5px;
  font-size: 12px;
  background: rgba(176, 223, 229, 1);
}

.left-talk {
  margin: 10px;
  clear: right;
  overflow: hidden;

  .left-img {
    float: left;
    border-radius: 5px;;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    margin-right: 4px;
  }

  #markdown {
    float: left;
    background: rgba(176, 223, 229, 1);
    max-width: 65%;
    vertical-align: top;
    border-radius: 5px;
    padding: 0 10px;
    font-size: 12px;
    word-wrap: break-word;
  }
}

.right-talk {
  margin: 10px;
  //解决子元素浮动导致父元素无法被撑开从而无法自适应高度
  overflow: hidden;

  img {
    float: right;
    border-radius: 5px;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    margin-left: 4px;
  }

  #markdown {
    float: right;
    background: rgb(116, 216, 128);
    max-width: 65%;
    vertical-align: top;
    border-radius: 5px;
    padding: 0 10px;
    font-size: 12px;
    word-wrap: break-word;
  }
}

</style>